<template>
    <div>
        <div class="header">
            <h2>设置访问外网线路</h2>
            <div>请根据当前所在网络环境选择对应的线路，并点击"更改线路"。</div>
        </div>
        <div class="optionBox">
            <div class="optionBox_item" v-for="item in circuitData" :key="item.circuit">
                <div class="item_title">
                    <h3>{{item.circuit}}</h3>
                    <el-radio v-model="circuitRadio" :label="item.circuit">{{ }}</el-radio>
                </div>
                <div class="item_content">
                    {{item.content}}
                </div>
            </div>
        </div>
        <el-button type="primary" class="btn">更改线路</el-button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            circuitRadio:'线路一',
            circuitData:[
                {
                    circuit:"线路一",
                    content:"该线路传输可靠、稳定。适用于网络不稳定的场景。"
                },
                {
                    circuit:"线路二",
                    content:"该线路传输速度较快，性能较高。适用于网络稳定的场景"
                }
            ]
        }
    }
}
</script>

<style lang="less" scoped>
.header{
    border-bottom: 1px solid #EBEEF5;
    h2{
        color: #007ACC;
        margin: 0;
    }
    div{
        font-size: 12px;
        margin-bottom: 20px;
    }
    
}
.optionBox{
    
    .optionBox_item{
        border-bottom: 1px solid #EBEEF5;
        height: 100px;
        padding: 20px 0;
        .item_title{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            h3{
                margin-right: 10px;
            }
        }
        .item_content{
            color: #0DBC79;
            margin: 10px 0 0 10px;
        }
        
    }
}
.btn{
    margin: 50px 0 0 1100px ;
}
</style>
